<template>  
  <body>  
  <header>
	<form action="http://120.46.213.49:8080/start" method="POST">
		输入序列:<input type="text" name="input"><br/>
		缓存大小<input type="text" name="csize"><br/>
		<input type="submit" value="原神启动">
	</form>
  </header>  
  <main>  
    <div class="box">
		<form method="post" action="/info">
			<p>Switch Key:<input type="submit" name="switch" value="switch" /></p>
		</form>
	</div>  
    <div class="box">框2</div>  
    <div class="box">框3</div>  
  </main>  
  <footer>操作栏</footer>  
</body> 
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      inputText: '',  
      csizeText: '',  
      boxes: ['框1', '框2', '框3'] // 这里可以动态添加或修改盒子内容  
    };  
  },  
  methods: {  
    handleSubmit() {  
      // 在这里处理表单提交的逻辑，比如发送 POST 请求等。  
      console.log('Form submitted:', this.inputText, this.csizeText); // 仅作示例，实际情况下你可能需要处理这些值。  
    }  
  }  
};  
</script>

<style>
body {  
      display: flex;  
      flex-direction: column;  
      height: 100vh;  
      margin: 0;  
    }  
      
    header {  
      background-color: #f2f2f2;  
      padding: 20px;  
      text-align: center;  
    }  
      
    main {  
      flex-grow: 1;  
      display: flex;  
      flex-wrap: wrap;  
    }  
      
    .box {  
      width: 33.33%;  
      padding: 20px;  
      border: 1px solid #ccc;  
      box-sizing: border-box;  
    }  
      
    footer {  
      background-color: #f2f2f2;  
      padding: 20px;  
      text-align: center;  
    }  
</style>